<template>
	<view class="pay">
		<!-- 支付内容 -->
		<view class="pay-content">
			<view class="content-top">
				<view class="top-left">
					{{goods.name}}
				</view>
				<view class="top-right">
					￥{{goods.total}}
				</view>
			</view>
			<view class="content-middle" @click="goDiscount">
				<view class="middle-left">
					使用优惠码
				</view>
				<view class="middle-right">
					{{code || '未使用'}}
				</view>
			</view>
			<view class="content-bottom">
				<view class="bottom-left">
					<view class="left-price">
						原价
					</view>
					<view class="left-discount">
						优惠码抵扣
					</view>
					<view class="left-total">
						总计
					</view>
				</view>
				<view class="bottom-right">
					<view class="right-price">
						￥{{goods.total}}
					</view>
					<view class="right-discount">
						-￥{{discount}}
					</view>
					<view class="right-total">
						￥{{goods.total - discount}}
					</view>
				</view>
			</view>
		</view>
		<!-- 确认支付 -->
		<view class="pay-buy">
			<view class="buy-left">
				￥{{goods.total - discount}}
			</view>
			<view class="buy-right" @click="gobuy">
				确认支付
			</view>
		</view>
		<view class="promo_code_shadow_box" :hidden="promoCodeShadowStatus===false">
			<view class="promo_code_box">
				<view class="input">
					<input type="number" placeholder="请输入邀请码" v-model="code" />
				</view>
				<view class="check-button" @click.stop="promoCodeCheck">
					检测是否可用
				</view>
				<view class="cancel-button" @click.stop="hidePromoCodeShadow">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {checkCode,setOeder,pay} from '@/request/VIP.js'
export default {
	data() {
		return {
			goods:{
				name:'',
				id:'',
				total:'',
				type:'',
			},
			code:'',
			discount:0,
			promoCodeShadowStatus: false
		};
	},
	onLoad(options) {
		console.log(options)
		this.goods.name = options.name
		this.goods.id = options.id
		this.goods.total = options.total
		this.goods.type = options.type
		console.log(this.goods)
	},
	methods:{
		goDiscount(){
	this.promoCodeShadowStatus = true;
		},
		hidePromoCodeShadow() {		
			this.promoCodeShadowStatus = false;		
		},
		async promoCodeCheck(){
			if(this.code.length === 0){
				this.promoCodeShadowStatus = false;
				this.code = ''
				this.discount = 0				
			}else{
			let res = await checkCode(this.code)
			console.log(res)
				if(res.data.data.can_use === 0){
					uni.showToast({
						icon: 'none',
						title:'优惠码不可用'
					})
				}else{
					this.discount =res.promo_code.invited_user_reward
					this.promoCodeShadowStatus = false;
				}			
			}
		},
		async gobuy(){
			if(this.goods.type === 'role'){
			let res = await setOeder({
				role_id:this.goods.id,
				promo_code:this.code
			})
			console.log(res.data.data)
			this.paymoney(res.data.data)
			}
		},
		async paymoney(data){
			if(data.status_text === '已支付'){
				uni.showToast({
					icon:'none',
					title:'支付成功'
				})
				setTimeout(() => {
					// 返回上一页
					uni.navigateBack({
						delta: 0,
					})
				}, 500);
				return
			}
			let res = await pay({
				openid:uni.getStorageSync('openid'),
				order_id:data.order_id
			}).catch(e=>{
				uni.showToast({
					icon:'none',
					title:'错误' + e
				})
			})
		     console.log(res.data.data)
			 let payData = res.data.data
			uni.requestPayment({
				nonceStr:payData.nonceStr,
				package:payData.package,
				paySign:payData.paySign,
				signType:payData.signType,
				timeStamp:payData.timeStamp,
				success(res) {
					console.log('支付成功',res)
					uni.showToast({
						title:'支付成功'
					})
					setTimeout(() => {
						// 返回上一页
						uni.navigateBack({
							delta: 0,
						})
					}, 500);
				},
				fail(err) {
					console.log('支付失败',err)
					uni.showToast({
						icon:'none',
						title:'支付失败'
					})
				}
			})
		}
	}
};
</script>

<style lang="less">
	body{
		background-color: #f2f2f2;
	}
	.pay{
		.pay-content{
			height: calc(100vh - 150rpx);
			.content-top{
				padding: 30rpx;
				margin-top: 30rpx;
				height: 150rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.top-left{
					font-size: 36rpx;
				}
				.top-right{
					font-size: 32rpx;
					color: red;
				}
			}
			.content-middle{
				padding: 30rpx;
				margin-top: 30rpx;
				height: 150rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 36rpx;
				.middle-left{
					
				}
				.middle-right{
					
				}
			}
			.content-bottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 300rpx;
				background-color: #fff;
				margin-top: 30rpx;
				padding: 30rpx;
				.bottom-left{
font-size: 36rpx;
					.left-price{
						
					}
					.left-discount{
						margin-top: 30rpx;
					}
					.left-total{
						margin-top: 30rpx;
					}
				}
				.bottom-right{
					font-size: 32rpx;
					color: red;
					.right-price{
						
					}
					.right-discount{
						margin-top: 30rpx;
					}
					.right-total{
						margin-top: 30rpx;
					}
				}
			}
		}
		.pay-buy{
			height: 120rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			font-size: 36rpx;
			.buy-left{
				color: red;
			}
			.buy-right{
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				width: 300rpx;
				background-color: #1784ed;
				color: #fff;
				border-radius: 50rpx;
			}
		}
		.promo_code_shadow_box {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 99;
			background-color: rgba(0, 0, 0, .5);
		}
		
		.promo_code_shadow_box>.promo_code_box {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 50px 15px 15px 15px;
			background-color: white;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
		}
		
		.promo_code_shadow_box>.promo_code_box>.input {
			width: 100%;
			height: auto;
			float: left;
			margin-bottom: 15px;
		}
		
		.promo_code_shadow_box>.promo_code_box>.input>input {
			width: 100%;
			height: 42px;
			border: 0;
			border-bottom: 1px solid #f2f2f2;
			box-sizing: border-box;
			padding: 3px 5px;
			font-size: 14px;
		}
		
		.promo_code_shadow_box>.promo_code_box>.check-button {
			width: 100%;
			height: 42px;
			line-height: 42px;
			float: left;
			margin-bottom: 15px;
			background-color: #1784ED;
			color: white;
			text-align: center;
			border-radius: 21px;
			font-size: 14px;
		}
		
		.promo_code_shadow_box>.promo_code_box>.cancel-button {
			width: 100%;
			height: auto;
			float: left;
			font-size: 12px;
			color: #aaa;
			line-height: 36px;
			text-align: center;
		}
	}
</style>
